<template>
  <div class="AddMedicalGControl">
    <div class="cus-title">
      <h4>新增医柜锁</h4>
    </div>
    <div class="cus-update">
      <el-form ref="form" :model="BindForm" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="门店:" prop="storeId">
          <el-col :span="24">
            <store-select v-model="BindForm.storeId" field="id" />
          </el-col>
        </el-form-item>
        <el-form-item label="位置:" prop="position">
          <el-col :span="24">
            <store-position-select v-model="BindForm.position" :store-id="BindForm.storeId" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="24">
            <el-alert
              title="若没有位置选择可直接输入位置。"
              type="info"
              :closable="false"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="医柜锁编号:" prop="medicalCode">
          <el-col :span="24">
            <el-input
              v-model="BindForm.medicalCode"
              type="textarea"
              :autosize="{ minRows: 7 }"
              resize="none"
              placeholder="添加多个请用英文“逗号”隔开"
              style="width: 400px;"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="硬件版本:" prop="hversion">
          <el-col :span="24">
            <select-medical-hversion v-model="BindForm.hversion" />
          </el-col>
        </el-form-item>
        <el-form-item label="驱动版本" prop="dversion">
          <el-col :span="24">
            <select-medical-dversion v-model="BindForm.dversion" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认新增</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import StoreSelect from '../../../../components/StoreSelect/index'
import StorePositionSelect from '../../../../components/StorePositionSelect/index'
import { Loading } from 'element-ui'
import { addMedicalLock } from '@/api/lockItem'
import SelectMedicalHversion from '../../../../components/SelectMedicalHversion/index'
import SelectMedicalDversion from '../../../../components/SelectMedicalDversion/index'
/** 新增医柜锁 */
export default {
  name: 'AddMedicalGControl',
  components: { SelectMedicalDversion, SelectMedicalHversion, StoreSelect, StorePositionSelect },
  data() {
    var validateEquCode = (rule, value, callback) => {
      var Regx = /^[a-zA-Z0-9,]*$/
      if (!Regx.test(value)) {
        callback(new Error('请输入正确的医柜锁编号'))
      } else {
        callback()
      }
    }
    var validatePosition = (rule, value, callback) => {
      if (value && value.length > 16) {
        this.$message.info('最多输入16个字符，系统自动截断')
        this.BindForm.position = this.BindForm.position.substr(0, 16)
      } else {
        callback()
      }
    }
    return {
      BindForm: {
        storeId: null,
        position: null,
        medicalCode: null,
        hversion: null,
        dversion: null
      },
      rules: {
        storeId: [{ required: true, message: '请选择门店', trigger: 'change' }],
        position: [{ required: true, message: '请选择位置', trigger: 'change' }, {
          trigger: 'change',
          validator: validatePosition
        }],
        medicalCode: [{ required: true, message: '请输入医柜锁编号', trigger: 'change' }, { validator: validateEquCode, trigger: 'change' }],
        hversion: [{ required: true, message: '请选择硬件版本', trigger: 'change' }],
        dversion: [{ required: true, message: '请选择驱动版本', trigger: 'change' }]
      }
    }
  },
  methods: {
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
    },
    submit() {
      const vm = this
      vm.$refs.form.validate((valid) => {
        if (valid) {
          const loadingInstance = Loading.service({ fullscreen: true })
          const data = vm.$XEUtils.clone(vm.BindForm, true)
          data['storeId'] = parseInt(data['storeId'])
          addMedicalLock(data).then(res => {
            loadingInstance.close()
            vm.$message.success('新增医柜锁成功')
            vm.$store.dispatch('tagsView/delView', vm.$route)
            vm.$router.go(-1)
          }).catch(res => {
            loadingInstance.close()
            if (res && res.data && res.data.errno !== 0) {
              this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .AddMedicalGControl {
    padding: 30px;
    .cus-update {
      padding: 20px 30px;
      padding-bottom: 0px;
      margin-bottom: 30px;
      border: 1px solid #eee;

      .cus-input {
        max-width: 400px;
      }
    }
  }
</style>
